<script setup>
import { ref } from "vue";

const activeIndex = ref(0);

// 示例图片集合
const list = ref([
  {
    id: 1,
    imgUrl:
      "https://pic4.zhimg.com/v2-3fad3b71721d643c918742fe2e75b943_1440w.jpg",
  },
  {
    id: 2,
    imgUrl: "https://qnimg1.wellcee.com/data/2021/11/02/1635829941667277",
  },
  {
    id: 3,
    imgUrl: "https://tgi12.jia.com/125/575/25575674.jpg",
  },
  {
    id: 4,
    imgUrl:
      "https://tse3-mm.cn.bing.net/th/id/OIP-C.i1hcTGMS4p5PwNvwMlJMnwHaFj?rs=1&pid=ImgDetMain",
  },
]);
// 处理轮播图切换事件
const onChange = (event) => {
  activeIndex.value = event.detail.current;
};
</script>

<template>
  <view class="carousel">
    <swiper
      :circular="true"
      :autoplay="true"
      :interval="3000"
      @change="onChange"
    >
      <swiper-item v-for="item in list" :key="item.id">
        <navigator
          url="/pages/index/index"
          hover-class="none"
          class="navigator"
        >
          <image mode="aspectFill" class="image" :src="item.imgUrl"></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 指示点 -->
    <view class="indicator">
      <text
        v-for="(item, index) in list"
        :key="item.id"
        class="dot"
        :class="{ active: index === activeIndex }"
      ></text>
    </view>
  </view>
</template>

<style lang="scss">
/* 轮播图 */
.carousel {
  height: 280rpx;
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  background-color: #efefef;

  .indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16rpx;
    display: flex;
    justify-content: center;

    .dot {
      width: 30rpx;
      height: 6rpx;
      margin: 0 8rpx;
      border-radius: 6rpx;
      background-color: rgba(255, 255, 255, 0.4);
    }

    .active {
      background-color: #fff;
    }
  }

  .navigator,
  .image {
    width: 100%;
    height: 100%;
  }
}
</style>
